<template>
  <a-card :bodyStyle="{display:'flex',padding:'0px'}"
  style="margin:5px;"
  class=""
  >
    <div slot="title" class="title">
      <!-- <span>统计分析</span> -->
      <div class="hover-show">
        <li>
          <span 
            :class="{'active':samplId}"
            @click="current = current===0?false:0"
          >数据集</span>
          <div class="hover-show-data"
          v-show="current===0"
          >
            <span 
            class="item" 
            v-for="item in samples"
            :class="{'active':samplId==item.id}"
            @click="selectsample(item)"
            >
              {{item.title}}
            </span>
          </div>
        </li><li>
          <span
            :class="{'active':chooseVarName && chooseVarName.length}"
            @click="()=>{
              if(samplId)
                current = current===1?false:1
              else
                $message.warn('请先选择数据集')
            }"
          >分析字段</span>
          <div v-show="current==1">
            <a-list
              :data-source="columns"
              :pagination="{
                pageSize:pageSize,
                showSizeChanger:true,
                size:'small',
                onShowSizeChange:(a,b)=>{
                  pageSize = b
                }
              }"
            >
              <div slot="header" style="display: flex;align-items: center;">
                <a-input-search 
                  placeholder="过滤变量"
                  :loading="searchLoading"
                  @change="searchChange"
                  @pressEnter="searchChange"
                />
              </div>
              <a-list-item 
                :key="`item-${item}`"
                slot="renderItem" slot-scope="item, index">
                <a-checkbox :checked="chooseVarName.includes(item)"
                  @change="chooseVarName = [item]"
                >
                  {{item}}
                </a-checkbox>
              </a-list-item>
            </a-list>
          </div>
        </li><li>
          <span 
            :class="{'active':true}"
            @click="current = current===2?false:2"
          >分箱</span>
          <div v-show="current==2">
            <div class="sel_item">
              <span>分箱数</span>
              <a-select v-model="subNumber" style="width: 140px">
                <a-select-option :value="10">10</a-select-option>
                <a-select-option :value="30">30</a-select-option>
                <a-select-option :value="50">50</a-select-option>
              </a-select>
            </div>
            <div class="sel_item">
              <span>分箱方法</span>
              <a-select v-model="subType" style="width: 140px">
                <a-select-option value="1">等频分箱</a-select-option>
                <a-select-option value="0">等距分箱</a-select-option>
              </a-select>
            </div>
          </div>
        </li><li style="display: flex;">
          <a-button
            type="default"
            title="提交" 
            icon="check"
            style="margin: auto;"
            @click="getEchartData" 
          />
        </li>
      </div>
    </div>
      <a-spin
        tip="Loading..."
        class="body-center"
        :spinning="spinning"
      />
      <line-chart
        ref="thischart"
        class="echart_box" 
        v-if="xData && xData.length" 
        :result="echartData"
        :xData="xData" 
        :yData="yData"
        :all_num="all_num"
      />
      <div
      v-else-if="!spinning"
      style="font-size: 24px;"
      class="body-center "
      >
        请选择数据计算图形
      </div>
      <!--
        <div style="background: #000;
          position: absolute;
          top: 50%;
          left: 50%;
        ">test</div>
      -->
  </a-card>
</template>

<script>
import LineChart from './modules/tjfxLineChart'
import { getDistributionDrawData } from '@/axios/analysisBatchApi'
import choosemixin from './mixins/choosemixin'

export default{
  components:{
    LineChart
  },
  mixins:[choosemixin],
  data(){
    return{
      xData:[],
      num:Object.freeze(7),
      type:Object.freeze(false),//是否多选
      yData:[],
      spinning:false,
      subType: '0',
      subNumber: 10,
      echartData:{},
    }
  },
  methods:{
    getEchartData() {
      const { samplId,subNumber,subType,chooseVarName } = this
      if( !samplId || !chooseVarName){
        this.$message.error("请选择要分析的字段")
        return
      }
      this.current = false
      this.spinning = true
      this.xData = []
      this.yData = []
      const varName = chooseVarName.join(",")
      getDistributionDrawData({ varName,samplId,subNumber,subType }).then(res => {
        const { data } = res
        this.xData = data.x_axis
        delete data.x_axis
        this.yData = data.bar_data
        delete data.bar_data
        data.have = true
        this.echartData = data
        this.spinning = false
        this.$nextTick(()=>{
          const sampleName = this.samples.find(e=>e.id === samplId).title
          const { thischart } = this.$refs
          thischart.sampleName = sampleName
          thischart.varName = varName
          thischart.subType = subType? '等频分箱':'等距分箱'
          thischart.subNumber = subNumber
        })
        // this.varName = []
      })
    },
  }
}
</script>

<style lang="less" scoped>
@titleHeight:40px;
/deep/.ant-card-head{
  height: @titleHeight;
  min-height: @titleHeight;
  display: flex;
  font-weight: 700;
  &-title{
    overflow: unset;
  }
  .title{
    display: flex;
    align-items: center;
  }
}
/deep/.ant-card-body{
  height: calc(100vh - @titleHeight - 56px);
  overflow-y: scroll;
  .body-center{
    margin:auto;
  }
}
.title-icon{
  margin-left: 50px;
  .change-by{
  margin-left: 5px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    &:hover{
      color: #1890ff !important;
    }
  }
}
//
.sel_item{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
//
.info_item{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
//
.radio-item{
  display: block;
}
//
/deep/.ant-list-items{
  max-height: 300px;
  min-width:320px;
  overflow-y: scroll;
}
/deep/.ant-list-pagination{
  margin-top: 4px;
}
</style>
